@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}

.web {
    width: r(640);
//  height: r(800);
}

header {
    .top {
        ul {
            width: r(640);
            height: r(75);
            border-bottom: 1px solid #A7A7A7;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li {
                display: flex;
                align-items: center;
                font-size: r(30);
                color: #343434;
                a {
                    display: flex;
                    align-items: center;
                    margin: 0 r(29);
                    font-size: r(24);
                    color: #585858;
                    img {
                        height: r(38);
                    }
                }
            }
            .con {
                margin: 0 auto;
                transform: translate(-30%);
            }
        }
    }
}
.conter{
    width: r(640);
    margin-top: r(57);
    .code{
        width: r(584);
        margin: 0 auto;
        background: #E5E5E5;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5); 
        border-radius:r(40);
        
        .top{
            width: r(584);
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            padding-top: r(21);
            padding-bottom: r(13);
            border-bottom: 1px solid #898989;
           img{
               width: r(118);
               margin-left: r(45);
               margin-right: r(30);
           }
           .h_title{
               p:first-of-type{
                   font-size: r(24);
                   color: #4e4e4e;
                   line-height: r(50);
               }
               p:last-of-type{
                   font-size: r(27);
                   color: #2e2e2e;
                   
               }
           }
        }
        .con{
            width: r(369);
            margin: 0 auto;
            p:first-of-type{
               font-size: r(20);
               color: #7e7e7e; 
               line-height: r(40);
               padding-top: r(20);
            }
            .img{
                width: r(360);
                height: r(360);
                overflow: hidden;
                line-height: r(360);
                vertical-align: middle;
                text-align: center;
                background: #FFFFFF;
                border-radius: r(10);
                margin-top: r(10);
                img{
                    width: r(331);
                    vertical-align: middle;
                    
                }
            }
        }
    }
    .foot{
        margin-top: r(20);
        padding-bottom: r(40);
        p{
            text-align: center;
            font-size: r(24);
            line-height: r(45);
        }
        p:first-of-type{
            color: #6c6c6c;
        }
        p:nth-of-type(2){
            color: #404040;
        }
        p:last-of-type{
            color:#2e2e2e;
        }
    }   
}
footer{
    .line{
        width: r(640);
        height: 1px;
        background: #000;
        margin-top: r(56);
        margin-bottom: r(40);
        position: relative;
        p{
            width: r(300);
            text-align: center;
            position: absolute;
            left:50%;
            transform:  translate(-50%,-50%);
            font-size: r(21);
            color: #404040;
            background: #FFFFFF;
        }
    }
    .link{
            
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom:r(100);
        .img{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                height: r(44);
                margin-right: r(5);
            }
            span{
                font-size: r(21);
                color: #a1a1a1;
            }
        }
    }
}
